<template>
  <div class="foot">
    <div class="title">{{ $t('ismsg.footer.title') }}</div>
    <div class="container">
      <div class="item" v-for="(item, index) in linkList" :key="index">
        <router-link :to="item.linkPath">
          <img :src="item.srcPath" alt="">
        </router-link>
      </div>
    </div>
    <div class="nav">
      <div class="navBox">
        <div class="version">{{ $t('ismsg.footer.text') }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineProps({
  navList: Array
})
const getImageUrl = (name: string) => {
  return new URL(`/src/assets/images/${name}.png`, import.meta.url).href
}
const linkList = [{
  srcPath: getImageUrl('link1'),
  linkPath: ''
}, {
  srcPath: getImageUrl('link2'),
  linkPath: ''
}, {
  srcPath: getImageUrl('link3'),
  linkPath: ''
}, {
  srcPath: getImageUrl('link4'),
  linkPath: ''
}, {
  srcPath: getImageUrl('link5'),
  linkPath: ''
}, {
  srcPath: getImageUrl('link6'),
  linkPath: ''
}, {
  srcPath: getImageUrl('link7'),
  linkPath: ''
}, {
  srcPath: getImageUrl('link8'),
  linkPath: ''
}]
</script>

<style lang='scss' scoped>
.foot {
  width: 100%;
  padding-top: 20px;
  background-color: rgba($color: #5a4037, $alpha: .65);
  position: relative;

  .title {
    width: 100%;
    text-align: center;
    font-family: MFBanHei_Noncommercial-Regular;
    font-size: 38px;
    font-weight: bold;
    color: #f8ebb9;
  }

  .container {
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;

    .item {
      width: 22%;
      margin: 10px;

      img {
        // width: 280px;
        width: 100%;
      }
    }
  }

  .nav {
    width: 100%;
    padding: 10px 0;
    background-color: rgba($color: #3a322e, $alpha: .45);

    .navBox {
      width: 80%;
      margin: 0 auto;
  
      .version{
        color: #7a7a7a;
        font-size: 12px;
        text-align: center;
      }
    }
  }
}

@media screen and (max-width: 500px) {
  .foot {
    .title {
      font-size: 28px;
      margin-bottom: 10px;
    }

    .container {
      width: 95%;

      .item {
        width: 28%;

        img {
          // width: 135px !important;
          width: 100%;
        }
      }

    }
  }

}</style>